<template>
	<view class="changealphabet">
		<view class="item" style="font-size: 14px;">#</view>
		<view class="item" v-for="(item,index) in city" :key='item.initial' hover-class="hover"
			@click="clickchar(item.initial)" @touchstart="TouchStart" @touchmove="TouchMove" @touchend="TouchEnd"
			:id="item.initial" :class="touchindex == index ? 'hover':''">
			{{item.initial}}
		</view>
	</view>
</template>

<script>
	var timer = null;
	export default {
		name: "ChangeAlphabet",
		data() {
			return {
				isTouch: false,
				touchindex: -1,
			};
		},
		props: {
			city: {
				default: [],
				type: Array,
			}
		},
		methods: {
			clickchar(res) {
				this.$bus.$emit('clickchar', res);
			},
			TouchStart(e) {
				this.isTouch = true;
			},
			TouchMove(e) {
				clearTimeout(timer);
				timer = setTimeout(() => {
					if (this.isTouch) {
						var pageY = e.changedTouches[0].pageY; //获取鼠标坐标的y
						var touchY = pageY - 250 - 15; //得到鼠标高度到首字母的距离
						this.touchindex = Math.floor(touchY / 15); //距离除以宽度得到当前字母的下标值
						if (this.touchindex >= 0 && this.touchindex <= this.city.length) {
							this.$bus.$emit('clickchar', this.city[this.touchindex].initial);
						}
					}
				},20);
			},
			TouchEnd(e) {
				this.isTouch = false;
				this.touchindex = -1;
			},
		},
		mounted() {
		}
	}
</script>

<style lang="scss">
	.changealphabet {
		position: fixed;
		top: 250px;
		right: 0px;
		color: #FFFFFF;
		width: 20px;

		.item {
			margin-right: 5px;
			color: #FFFFFF;
			font-size: 10px;
			height: 15px;
			line-height: 15px;
			text-align: center;
		}

		.hover {
			font-size: 16px;
		}
	}
</style>
